//组织架构
import React, { useEffect, useState } from 'react';
import 'moment/locale/zh-cn'
import useStore from '../../components/useStore';
import {
  PlusSquareOutlined} from '@ant-design/icons';
import { Button,Pagination,Row,Col,Empty,Modal,Tag, notification } from 'antd';
import TextArea from 'antd/lib/input/TextArea.js';
import request from '../../untils/request'

const NoticeManagement = () => {//通知管理页

    const { setnowroute,collapsed } = useStore()
    const [notices,setnotices]=useState([])//查询出来的通知信息列表
    const [notice,setnotice]=useState({})//查询出来的通知信息
    const [currentPage,setcurrentPage]=useState(1)
    const [total,settotal]=useState(0)
    const [showModal,setshowModal]=useState(false)

    /**前往新增页面*/
    const toAddNoticeForm = async () => {
        setnowroute({...{route:"/ship/sys/addNoticeForm",title:"新增通知"}})
    }

    const openDetail=async (id)=>{
        setshowModal(true)
        request("/admin/notice/getNoticeById", {
            method: 'POST',
            mode: 'cors',
            body:{
                id:id
            }
        }).then(data => {
            setnotice(data)
        })
    }

    const deleteById=async (id)=>{
        request("/admin/notice/deleteById", {
            method: 'POST',
            mode: 'cors',
            body:{
                id:id
            }
        }).then(data => {
            notification.open({
                message:data.msg
            })
        })
    }

    const closeModal=async ()=>{
        setshowModal(false)
    }

    const changePage=async (e)=>{
        setcurrentPage(e)
        request("/admin/notice/getNotices", {
            method: 'POST',
            mode: 'cors',
            body:{
                pageSize:10,
                offset:(e-1)*10
            }
        }).then(data => {
            setnotices(data.data)
        })
    }

    useEffect(()=>{
        request("/admin/notice/getNotices", {
            method: 'POST',
            mode: 'cors',
            body:{
                pageSize:10,
                offset:0
            }
        }).then(data => {
            setnotices(data.data)
            settotal(data.total)
        })
    },[])

    return (
        <div style={{    height: "94%", backgroundColor: `#F1F1F1`,right:"1%",top:"4vh",overflow:"hidden",
        backgroundSize: "100% 100%", width: collapsed?"94%":"84%", position: "absolute",  color: "white", fontSize: "0.8rem"}}>
            <div style={styles.kshcontainer}>
                <div style={{
                    fontSize: "0.7rem", position: "relative", width: "96%", marginLeft: "2%", backgroundColor: "", display: "flex",
                    textIndent: "1rem", justifyContent: "flex-start", alignContent: "flex-start", flexWrap: "wrap"
                }}>
                    <div style={{marginTop:"2vh"}}>
                        <Button onClick={toAddNoticeForm} style={{ backgroundColor: "white", color: "#a91f24", fontWeight: "800" }}>
                            <PlusSquareOutlined />新增</Button>
                    </div>
                    {
                        notices.length==0?
                        (<div style={{width:"100%"}}>
                            <Empty/>
                        </div>):
                        (<div style={{width:"100%"}}>
                            <Row gutter={24}>
                                <Col span={3}>序号</Col>
                                <Col span={10}>标题</Col>
                                <Col span={8}>发布时间</Col>
                                <Col span={3}>操作</Col>
                            </Row>
                            {notices.map((item,index)=>{
                                return <Row gutter={24}>
                                    <Col span={3}>{index+1}</Col>
                                    <Col span={10}>{item.title}</Col>
                                    <Col span={8}>{item.create_time}</Col>
                                    <Col span={3}>
                                        <Button onClick={()=>{openDetail(item.id)}}>详情</Button>
                                        <Button onClick={()=>{deleteById(item.id)}}>删除</Button>
                                    </Col>
                                </Row>
                            })}
                            <Pagination
                                currentPage={currentPage}
                                onChange={changePage}
                                total={total}
                            />
                        </div>)
                    }
                    <Modal
                        title={notice.title}
                        open={showModal}
                        onCancel={closeModal}
                        footer={null}
                    >
                        <Tag>{notice.type==0?"一般":notice.type==1?"批评":"表扬"}</Tag>
                        <TextArea style={{height:"50vh"}} disabled value={notice.content}/>
                        发布时间：{notice.create_time}
                    </Modal>
                </div>
            </div>
        </div>
    )
}

export default NoticeManagement

var styles = {
    maincontainer: {
        height: "100vh", 
        backgroundColor: `white`,
        backgroundSize: "100% 100%", 
        width: "100%", 
        position: "absolute",
        color: "white", 
        fontSize: "0.8rem"
    },
    topcontainer: {
        width: "100%", 
        height: "10vw", 
        backgroundImage: "linear-gradient(to bottom,#e4e5eb , white)", 
        paddingTop: "3vw",
        position: "relative", 
        fontSize: "0.89rem", 
        textIndent: "2rem", 
        fontWeight: "800", 
        color: "#a91f24", 
        borderRadius: "0 0 15px 15px"
    },
    butdcstyle: { paddingLeft:"1vw",
        paddingRight:"1vw",height: "2vw", 
        position: "absolute", 
        right: "1%",
        backgroundColor: "#a91f24", 
        fontSize: "0.8vw", 
        borderRadius: "0.4rem", 
        borderRadius: "0 0 0.3vw 0.3vw" 
    },
    butmainstyle: {
        paddingLeft:"1vw", 
        height: "2vw", 
        position: "absolute", 
        right: "6.5%",
        backgroundColor: "#a91f24", 
        fontSize: "0.8vw", 
        borderRadius: "0.4rem", 
        borderRadius: "0 0 0.3vw 0.3vw" 
    },
    butbackstyle: { 
        borderRadius: "0.4rem", 
        backgroundColor: "#a91f24", 
        height: "2vw", 
        position: "absolute", 
        right: "12%",
        fontSize: "0.8vw", 
        borderRadius: "0 0 0.3vw 0.3vw"
    },
    kshcontainer: {
        width: "98%", 
        height: "95%", 
        position: "absolute", top: "3%", 
        left: "1%", backgroundColor: "white", 
        color: "black",
        borderRadius: "10px",
    },
}